<template>
  <view class="page-container">
    <view class="page-main">
      <view class="form-item">
        <view class="form-item-bd">
          <input type="text" class="form-input" v-model="username" maxlength="32"
            :placeholder="$t('login.placeholderAccount')" />
        </view>
      </view>
      <view class="form-item">
        <view class="form-item-bd">
          <input type="text" class="form-input" v-model="password" maxlength="32"
            :placeholder="$t('login.placeholderPassword')" :password="!showPassword" />
          <image :src="'/static/images/icon_eye_' + (showPassword ? 'show' : 'hide') + '.png'" class="icon-eye"
            @click="showPass()"></image>
        </view>
        <view class="form-item-ft">
          <image src="/static/images/icon_fingerprint.png" class="icon-fingerprint"></image>
        </view>
      </view>
      <view class="form-button" @click="submit('1')"><text>登录</text></view>
    </view>
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  import base64 from "@/common/base64.js";
  import {
    validatenull
  } from "@/common/validate.js";
  import md5 from "@/common/md5.min.js";

  export default {
    data() {
      return {
        phoneNo: "",
        username: "",
        password: "",
        loginType: "currentPhone",
        showPassword: false,
        remember: true,
        isValidCodeLogin: false,
        validCode: "",
        imgValidCodeSrc: null,
        list: [{
            name: "用户名",
          },
          {
            name: "手机号",
          },
        ],
        current: 0,
        activeColor: "#007aff",
      };
    },
    onLoad(param) {
      if (
        !validatenull(this.vuex_accessToken) &&
        !validatenull(this.vuex_loginSource) &&
        (this.vuex_loginSource === "0" || this.vuex_loginSource === "1")
      ) {
        this.setPermission(this);
        this.$u.api
          .index({
            loginCheck: true,
          })
          .then((res) => {
            if (res.code == "200") {
              uni.reLaunch({
                url: "/pages/sys/workbench/index",
              });
            }
          });
      }
    },
    methods: {
      showPass() {
        this.showPassword = !this.showPassword;
      },
      qiehuanLogin() {
        this.loginType = "other";
      },
      onClickItem(index) {
        this.current = index;
      },
      refreshImgValidCode(e) {
        if (this.vuex_token == "") {
          this.$u.api.index().then((res) => {
            this.imgValidCodeSrc =
              this.vuex_config.baseUrl +
              "/validCode?__sid=" +
              res.sessionid +
              "&t=" +
              new Date().getTime();
          });
        } else {
          this.imgValidCodeSrc =
            this.vuex_config.baseUrl +
            "/validCode?__sid=" +
            this.vuex_token +
            "&t=" +
            new Date().getTime();
        }
        this.validCode = "";
      },
      nextStep() {
        //验证码登录下一步
        uni.showLoading({
          title: "正在获取验证码",
          mask: true,
        });
        this.$u.api
          .sendCode({
            phoneNo: this.phoneNo,
            validCodeType: "2",
          })
          .then((res) => {
            if (res.code == "200") {
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/sys/login/code?phoneNo=" + this.phoneNo,
                });
              }, 1000);
            } else {
              this.$u.toast(res.msg);
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pages/sys/login/code?phoneNo=" + this.phoneNo,
                });
              }, 500);
            }
          });
      },
      submit(loginType) {
        if (this.username.length == 0) {
          this.$u.toast("请输入账号");
          return;
        }
        if (this.password.length == 0) {
          this.$u.toast("请输入密码");
          return;
        }
        this.$u.api
          .login({
            username: this.username,
            password: md5(this.password),
            grant_type: "password",
            refresh_token: "",
            tenant_id: this.vuex_config.tenantId,
          })
          .then((res) => {
            if (res.access_token) {
              uni.showToast({
                title: "登录成功",
                duration: 4000,
              });
              setTimeout(() => {
                this.setPermission(this);
                //验证是否有前面页，有就跳转
                if (this.vuex_config.switchMode && res.role_id.includes(",")) {
                  // uni.reLaunch({
                  // 	url: '/pages/sys/user/switchRole'
                  // });
                  this.goPage();
                } else {
                  this.goPage();
                }
              }, 500);
              if (res.isValidCodeLogin) {
                this.isValidCodeLogin = true;
                this.refreshImgValidCode();
              }
            } else if (res.error) {
              uni.showToast({
                title: res.error_description,
                duration: 2000,
              });
            } else {
              uni.showToast({
                title: "未连接到服务器！",
                duration: 2000,
              });
            }
          });
      },
      wxLogin(res) {
        this.$u.toast("微信登录");
      },
      qqLogin() {
        this.$u.toast("QQ 登录");
      },
    },
  };
</script>
<style lang="scss">
  .page-container {
    height: 100%;
    background: #fff;
  }

  .page-main {
    position: relative;
    padding: 640rpx 64rpx 0;
    background: url('../../../static/images/logo_bg.png') no-repeat;
    background-position: top left;
    background-size: 100% auto;

    .logo {
      position: absolute;
      top: 182rpx;
      left: 72rpx;
      width: 397rpx;
      height: 107rpx;

      image {
        width: 100%;
        height: auto;
        vertical-align: top;
      }
    }
  }

  .form-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 80rpx;
  }

  .form-item-bd {
    position: relative;
    flex: 1;
    height: 96rpx;
    border-radius: 96rpx;
    background: #ECF2FF;
    overflow: hidden;

    .icon-eye {
      position: absolute;
      top: 28rpx;
      right: 32rpx;
      width: 40rpx;
      height: 40rpx;
      vertical-align: top;
    }
  }

  .form-item-ft {
    display: inline-flex;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    margin-left: 24rpx;
    background: #D1EFEA;

    .icon-fingerprint {
      width: 40rpx;
      height: 40rpx;
      margin: auto;
      vertical-align: top;
    }
  }

  .form-input {
    flex: 1;
    width: 100%;
    height: 96rpx;
    padding: 0 48rpx;
    line-height: 96rpx;
    font-size: 28rpx;
    color: #9095B2;
  }

  .form-button {
    height: 96rpx;
    box-shadow: 0px 14rpx 48rpx 14rpx rgba(57, 137, 252, 0.23);
    border-radius: 96rpx;
    margin-top: 124rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #FFFFFF;
    background: #3989FC;
  }
</style>